import React, { useState, useRef } from 'react';
import { ProTable } from '@ant-design/pro-table';
import { Button } from 'antd';
import { useIntl } from 'umi';
// import AddInformationBeneficiaries from "../../components/AddInformationBeneficiaries";
import AddInformationBeneficiaries from '@/components/AddInformationBeneficiaries';

import ViewBeneficiary from '@/components/ViewBeneficiary';

import style from './index.less';

const BeneficiaryInformation: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const [open, setOpen] = useState(false);
  const [checkOpen, setCheckOpen] = useState(false);
  const [addflag, setAddflag] = useState();

  // 修改开关
  const showDrawer = () => {
    setOpen(true);
  };
  // 修改开关
  const onClose = (value) => {
    setOpen(value);
  };

  // 查看开关

  const showCheckDrawer = () => {
    setCheckOpen(true);
  };
  const onCheckClose = (value) => {
    setCheckOpen(value);
  };

  const columns = [
    {
      // title: '账户名称',
      title: () => <>{t('form.accountTitle')}</>,
      dataIndex: 'applytitle',
      // hideInTable: true,
    },
    {
      // title: '银行卡号',
      title: () => <>{t('form.BankCardNo')}</>,
      dataIndex: 'sehnqingdnahao',
    },

    {
      disable: true,
      // title: '受益人ID',
      title: () => <>{t('menu.BeneficiaryID')}</>,
      dataIndex: 'benfnag',
      hideInSearch: true,
    },
    {
      // disable: true,
      title: () => <>{t('layout.CustomerName')}</>,
      title: '客户名称',
      dataIndex: 'duifang',
      hideInSearch: true,
    },
    {
      disable: true,
      // title: '账户币种',
      title: () => <>{t('form.AccountCurrency')}</>,
      dataIndex: 'maichu',
      hideInSearch: true,
    },
    {
      disable: true,
      // title: '银行名称',
      title: () => <>{t('form.Bankname')}</>,
      dataIndex: 'mairu',
      hideInSearch: true,
    },
    {
      disable: true,
      // title: '状态',
      title: () => <>{t('form.State')}</>,
      dataIndex: 'state',
      valueType: 'select',
    },

    {
      disable: true,
      // title: '状态说明',
      title: () => <>{t('form.StatusDescription')}</>,
      dataIndex: 'yuanyinshuom',
      hideInSearch: true,
    },

    {
      // title: '操作',
      title: () => <>{t('form.Option')}</>,
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => {
        return (
          <>
            <Button
              size="small"
              type="link"
              onClick={() => {
                showCheckDrawer();
              }}
            >
              {/* 详情 */}
              {t('buttons.Details')}
            </Button>
            <Button
              size="small"
              type="link"
              onClick={() => {
                showDrawer();
                setAddflag(2);
              }}
            >
              {/* 修改 */}
              {t('buttons.Modify')}
            </Button>
            <Button size="small" type="link">
              {/* 删除 */}
              {t('buttons.Delete')}
            </Button>
          </>
        );
      },
    },
  ];
  const actionRef = useRef();
  return (
    <div className={style.ApplicationResultBoss}>
      <AddInformationBeneficiaries
        addflag={addflag}
        open={open}
        showDrawer={showDrawer}
        onClose={onClose}
      />

      <ViewBeneficiary
        checkOpen={checkOpen}
        showCheckDrawer={showCheckDrawer}
        onCheckClose={onCheckClose}
      />
      <ProTable
        style={{ height: '100%' }}
        scroll={{ x: 1000 }}
        columns={columns}
        actionRef={actionRef}
        cardBordered
        form={{ labelWrap: true }}
        request={async (params = {}, sort, filter) => {
          console.log('params', params, 'sort', sort, 'filter', filter);

          const data = [
            {
              id: 1,
              shanghao: '11',
              applytitle: '1212121',
            },
            {
              id: 2,
              shanghao: '22',
              maichu: '121312',
            },
            {
              id: 3,
              shanghao: '22',
              maichu: '速度输出',
            },
            {
              id: 4,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
            {
              id: 44,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
            {
              id: 432,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
            {
              id: 42,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
          ];

          return {
            data: data,
          };
        }}
        search={{
          labelWidth: 90,
          // span: 12,
          // optionRender: ({ searchText, resetText }, { form }, dom) => [
          //   <Button
          //     key="searchText"
          //     type="primary"
          //     onClick={() => {
          //       form?.submit();
          //     }}
          //   >
          //     {t("buttons.query")}
          //   </Button>,
          //   <Button
          //     key="resetText"
          //     onClick={() => {
          //       form?.resetFields();
          //     }}
          //   >
          //     {t("buttons.Reset")}
          //   </Button>,
          // ],
          // collapseRender: (collapsed, showCollapseButton) => {
          //   return collapsed ? (
          //     <Button
          //       type="link"
          //       key="resetText"
          //       onClick={() => {
          //         console.log(
          //           "collapsed, showCollapseButton",
          //           collapsed,
          //           showCollapseButton
          //         );
          //         setShowFlag(collapsed);
          //       }}
          //     >
          //       {/* 展开 */}
          //       {t("buttons.Open")}
          //     </Button>
          //   ) : (
          //     <Button
          //       type="link"
          //       key="resetText"
          //       onClick={() => {
          //         console.log(
          //           "collapsed, showCollapseButton",
          //           collapsed,
          //           showCollapseButton
          //         );
          //         setShowFlag(collapsed);
          //       }}
          //     >
          //       {/* 关闭 */}
          //       {t("buttons.Close")}
          //     </Button>
          //   );
          // },
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 10,
          onChange: (page) => console.log(page),
        }}
        // headerTitle="高级表格"
        defaultSize="small"
        toolBarRender={() => [
          <Button
            key="button"
            type="primary"
            onClick={() => {
              showDrawer();
              setAddflag(1);
            }}
          >
            {/* 新增 */}
            {t('buttons.Add')}
          </Button>,
          <Button key="button" type="primary">
            {/* 导出 */}
            {t('buttons.Export')}
          </Button>,
        ]}
      />
    </div>
  );
};

export default BeneficiaryInformation;
